<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
    <title>GY</title>
    <!--<link rel="stylesheet" href="css/bootstrap.min.4.3.1.css" type="text/css">-->
    <link rel="stylesheet" href="css/lib/heyui.css" type="text/css">
    <script src="js/lib/jquery-3.4.1.js"></script>
    <script src="js/lib/vue.min.js"></script>
    <script src="js/lib/heyui.js"></script>
    <script src="js/lib/httpVueLoader.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<div id="app" class="container-fluid">
    <upload></upload>
    <!--Gy welcome index-->
    <!--<div>{{msg}}</div>-->

    <!--<i-button type="primary" @click="addComponent"/>-->
<!--    <div class="flex-row">-->
<!--        &lt;!&ndash;<i-select />&ndash;&gt;-->
<!--        <input type="text" list="search" v-model="keyword">-->
<!--        <datalist id="search">-->
<!--            <template v-for="item in list">-->
<!--                <option :value="item.id">{{item.label}}</option>-->
<!--            </template>-->
<!--        </datalist>-->
<!--    </div>-->

<!--    <div class="flex-row">-->
<!--        <form >-->
<!--            <div class="form-group form-small-group">-->
<!--                <label>标签1</label>-->
<!--                <input v-model="addForm.tag1"/>-->
<!--            </div>-->
<!--            <div class="form-group form-small-group">-->
<!--                <label>标签2</label>-->
<!--                <input v-model="addForm.tag2"/>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label>html代码</label>-->
<!--                <textarea v-model="addForm.htmlCode" rows="15"></textarea>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label>groovy代码</label>-->
<!--                <textarea v-model="addForm.groovyCode" rows="15"></textarea>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <input type="button" @click="addComponent" value="添加"/>-->
<!--            </div>-->
<!--        </form>-->
<!--    </div>-->


    <div id="pieceUpload">
        <ul v-if="pendingFiles">
            上传列表...
            <li v-for="f in pendingFiles">
                文件名:
                <a v-if="f.url" :href="f.url">{{f.name}}</a>
                <span v-else>{{f.name}}</span>
                <br/>
                <progress max="100" :value="f.progress"></progress><br>
                <div v-if="f.progress < 100">
                    <button v-if="f.pause" @click="resume(f)">继续</button>
                    <button v-else @click="suspend(f)">暂停</button>
                </div>
            </li>
        </ul>
    </div>

    <div>
        <form id="form1">
            <input type="file" name="file">
            <input type="button" value="提交" @click="uploadFile">
        </form>
    </div>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            ws: null, msg: '', addResult: null,
            optId:'', loading: false, list: [], keyword: '',
            showAddForm: false, addForm: {},
            files: [],
            picUrl: 'http://125.67.237.26:9672/staticResource/freeTrade/recognizeRecord/20200320220709ocrc7ff8db843054ca0/3/2020031010006.jpg',
            pendingFiles: []
        },
        components: {
            // upload: httpVueLoader('coms/Upload.vue')()
        },
        mounted: function () {
            ws()
        },
        watch: {
            keyword: function (v) {this.search(v)},
            files: function (v) {
                console.log('xxxxxxxxxxxxxxxxxxx: ', v)
            }
        },
        methods: {
            uploadFile: function () { // 文件上传
                let _this = this;
                let fd = new FormData($('#form1')[0]);
                let file = fd.get('file');
                if (file.size > 1024 * 1024 * 20) { // 如果文件大于20M 就分片上传
                    this.pieceUpload(file);
                    return
                }
                $.ajax({
                    url: 'test/upload',
                    type: 'post',
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function (resp) {
                        if (resp.code == '00') _this.addResult = resp;
                        else app.$Notice.error({title: '错误提示', desc: resp.desc, duration: 7})
                    }
                })
            },
            pieceUpload: function(file) { // 分片上传文件
                let uploading = {
                    file: file, name: file.name, pause: false, // 是否暂停
                    perPieceSize: 1024 * 1024 * 4,
                    totalPiece: 0, currentPiece: 0,
                    progress: 0,
                    url: null,
                    uploadId: (((1+Math.random())*0x10000)|0).toString(16) + (((1+Math.random())*0x10000)|0).toString(16) + '_' + new Date().getTime()
                };
                uploading.totalPiece = Math.ceil(file.size / uploading.perPieceSize);
                this.pendingFiles.push(uploading);
                this.doUpload(uploading)
            },
            doUpload: function(uploading) {
                let _this = this;
                let fd = new FormData();
                let startIndex = uploading.currentPiece * uploading.perPieceSize;
                let endIndex = Math.min(startIndex + uploading.perPieceSize, uploading.file.size);
                fd.append('filePiece', uploading.file.slice(startIndex, endIndex));
                fd.append('originName', uploading.name);
                fd.append('uploadId', uploading.uploadId);
                fd.append('currentPiece', (++uploading.currentPiece));
                fd.append('totalPiece', uploading.totalPiece);
                $.ajax({
                    url: 'test/pieceUpload',
                    type: 'post',
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function (resp) {
                        if (resp.code == '00') {
                            if (!uploading.pause && uploading.totalPiece > uploading.currentPiece) {
                                uploading.progress = (100 / uploading.totalPiece) * uploading.currentPiece;
                                _this.doUpload(uploading)
                            }
                            if (uploading.totalPiece == uploading.currentPiece) {
                                uploading.progress = 100;
                                uploading.url = resp.data
                            }
                        } else app.$Notice.error({title: '错误提示', desc: resp.desc, duration: 7})
                    }
                })
            },
            suspend: function(uploading) {
                uploading.pause = true
            },
            resume: function(uploading) {
                uploading.pause = false;
                this.doUpload(uploading)
            },
            downXlsx: function() {
                let xhr = new XMLHttpRequest();
                xhr.open('post', 'test/downXlsx', true);
                xhr.responseType = 'blob';
                xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
                xhr.onload = function () {
                    if (this.status == 200) {
                        let blob = this.response;
                        let a = document.createElement('a');
                        let url = window.URL.createObjectURL(blob);
                        a.href = url;
                        //设置文件名称
                        a.download = '用户信息.xls';
                        a.click();
                    }
                }
                xhr.send(JSON.stringify({
                    "type" : 1,
                    "startDate" : "2018-01-01",
                    "endDate" : "2018-12-31"
                }));
            }
        },
    });
    $.ajaxSetup({
        complete: (xhr) => {
            if (xhr.status == 401) { // 登录实效 or 未登录
                app.$data.user = null
            } else if (xhr.status == 403) {
                app.$Notice.error('没有权限');
            }
        }
    });
</script>
</body>
</html>